<template>
    <view class="video-list-item" @click="$emit('play', item)">
        <view class="video-list-item__play">
            <img class="video-list-item__playicon" src="/static/images/play.png" alt="">
        </view>
        <view>
            <view class="video-list-item-tag" v-if="item.tag==1">
                <text class="video-list-item-tag__label">预告</text>
            </view>
            <view class="video-list-item-tag" v-if="item.tag==2">
                <!-- <image src="" mode="" /> -->
                <text class="video-list-item-tag__label">直播中</text>
            </view>
            <img class="video-list-item__cover" :src="item.img" alt="">
            <view class="video-list-item__title">{{item.tit}}</view>
            <view class="video-list-item__data">
                <view class="video-list-item__poster">
                    <img class="video-list-item__postericon" src="/static/images/wlj.png" alt="">
                    <text class="video-list-item__posterlabel">{{item.addres}}</text>
                </view>
                <view class="video-list-item__like" v-if="isShowLike">
                    <img class="video-list-item__likeicon" src="/static/images/veryLike.png" alt="">
                    <text class="video-list-item__likelabel">{{item.like}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'video-list-item',
    props: {
        item: {
            type: Object,
            required: true,
        },
        isShowLike: {
            type: Boolean,
            default: true,
        },
    }
}
</script>

<style lang="scss" scoped>
.video-list-item {
    position: relative;
    width: 328upx;
    height: 342upx;
    margin-top: 30upx;
    box-shadow: 0px 3px 6px 0px rgba(37, 37, 37, 0.11);
    border-radius: 0px 0px 10px 10px;
    padding-bottom: 20upx;
    overflow: hidden;
    &__play {
        position: absolute;
        z-index: 99;
        top: 77upx;
        left: 140upx;
    }
    &__playicon {
        display: block;
        width: 47upx;
        height: 47upx;
    }
    &__cover {
        display: block;
        width: 100%;
        height: 200upx;
    }
    &__title {
        margin-top: 16upx;
        font-size: 28upx;
        font-weight: 500;
        color: #333333;
        padding-left: 10upx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    &__data {
        display: flex;
        justify-content: space-between;
        font-size: 24upx;
        margin-top: 20upx;
        padding: 0 10upx;
        box-sizing: border-box;
        text {
            font-size: 24upx;
            color: #676767;
        }
        view {
            display: flex;
            align-items: center;
        }
        view:nth-child(1) img {
            display: block;
            width: 30upx;
            height: 30upx;
        }
        view:nth-child(2) img {
            display: block;
            width: 24upx;
            height: 24upx;
        }
        text {
            margin: 0;
            padding-left: 10upx;
        }
    }
}

.video-list-item-tag {
    position: absolute;
    top: 10upx;
    right: 20upx;
    font-size: 24upx;
    color: #fff;
    background: #e38434;
    padding: 8upx 16upx;
    border-radius: 5px;
}
</style>